<template>
  <div class="home">
    <div class="login">
      <p class="title">汽车租赁平台</p>
      <el-input
        placeholder="请输入用户名"
        class="mb"
        v-model="username"
      ></el-input>
      <el-input
        placeholder="请输入密码"
        class="mb"
        type="password"
        v-model="password"
      ></el-input>
      <el-button type="primary" class="loginbutton" @click="login"
        >登录</el-button
      >
      <p style="text-align:right;cursor:pointer; " @click="zc()">还没有账号?去注册~</p>
    </div>
  </div>
</template>

<script>
import service from "../request";
export default {
  name: "home",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  mounted() {
    if (window.localStorage.getItem("token")) {
      this.$router.push("/about");
    }
  },
  methods: {
    zc(){
      this.$router.push({
        path:"/zc"
      })
    },
    async login() {
      if (this.username == "" || this.password == "") {
        this.$message.warning("请输入用户名和密码");
      } else {
        const res = await service.get("/index/user", {
          params: {
            username: this.username,
            password: this.password,
          },
        });
        console.log(res);
        if (res.code == 200) {
          this.$message.success(`登录成功`);
          window.localStorage.setItem("user", JSON.stringify(res.data));
          window.localStorage.setItem("token", res.token);
          this.$router.push("/about");
        } else {
          this.$message.warning(`${res.msg}`);
        }
      }
    },
  },
};
</script>
<style scoped>
.home {
  width: 100%;
  height: 100%;
  background: url("../assets/zl.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.login {
  width: 600px;
  height: auto;
  padding: 15px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  border-radius: 10px;
  top: 33%;
  left: 33%;
}
.title {
  text-align: center;
  color: #000;
  font-weight: 800;
  font-size: 20px;
}
.mb {
  margin-bottom: 15px;
}
.loginbutton {
  width: 100%;
}
</style>
